[CL-1191] - spotlight and popover fixes#20519
Conversation
| /** Optional title displayed in the popover header */ | ||
| readonly title = input(""); | ||
|
|
||
| /** Optional CSS class(es) applied to the inner content container */ |
There was a problem hiding this comment.
@jaasen-livefront Why do we need to customize popover elements like this? Not sure we want to intentionally allow for inconsistent popover designs
There was a problem hiding this comment.
If these are coming from the width/padding design feedback, we don't need to implement overrides here. Width and padding will be updated in #20021.
| --color-bg-hover: rgba(var(--color-gray-950-rgb), 0.05); | ||
| --color-bg-hover-contrast: rgba(var(--color-white-rgb), 0.05); | ||
| --color-bg-overlay: rgba(var(--color-gray-950-rgb), 0.3); | ||
| --color-bg-overlay: rgba(var(--color-gray-950-rgb), 0.55); |
There was a problem hiding this comment.
I'm not sure why we need this change. Does the sidenav item need to be showing it's hover state when we 'spotlight' it?
There was a problem hiding this comment.
This is the color defined by design for the backdrop globally. If we are going to make changes here we'll need sign-off from design to do so.
|
@BryanCunningham Updated the PR to focus only on two items that aren't covered by existing UIF work. |
jaasen-livefront
changed the title
jaasen-livefront
changed the title
Codecov Report❌ Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## main #20519 +/- ##
==========================================
+ Coverage 47.11% 47.33% +0.22%
==========================================
Files 3951 3956 +5
Lines 119744 120401 +657
Branches 18346 18525 +179
==========================================
+ Hits 56417 56993 +576
+ Misses 59092 59081 -11
- Partials 4235 4327 +92 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
| * CSS selector to find a child element within the anchor to use as the spotlight target. | ||
| * If not provided, the anchor element itself is used. | ||
| */ | ||
| readonly spotlightTargetSelector = input<string>(); |
There was a problem hiding this comment.
We can remove this now. This will be handled in the service moving forward
|
3 participants
🎟️ Tracking
https://bitwarden.atlassian.net/browse/CL-1191
📔 Objective
Fixes issues with the spotlight effect used in guided tour popovers, and adds customization inputs to
bit-popover.Resize lag — CDK's
repositionscroll strategy only reacts to scroll events, so resizing the window caused the spotlight cutout to trail behind the highlighted element. Added awindowresizelistener inSpotlightServicethat immediately callsupdatePosition(), cleaned up when the overlay is disposed.Spotlight cropping — The spotlight cutout was sizing to the directive's host element, which could be wider than the visual target (e.g. a full-width nav row). Added a
spotlightTargetSelectorinput toPopoverAnchorForDirectivethat accepts a CSS selector to find a child element to use as the spotlight target instead.📸 Screenshots
Screen.Recording.2026-05-05.at.2.18.15.PM.mov